<template>
<div class="page-body" v-loading="false">
    <div class="page-header">
    <h1 class="page-title" style="text-align: left;" >行程记录</h1>
    <el-breadcrumb>
      <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item >行程记录</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="amap-page-container" v-loading="loading">
     <el-card :body-style="{ padding: '10px' }" class="top-card" style="width:400px">
       <el-tooltip :content="showPoint?'关闭四急':'显示四急'" placement="top">
        <el-switch
          @change="handleChange"
          v-model="showPoint"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="true"
          :inactive-value="false">
        </el-switch>
      </el-tooltip>
    查看日期：<el-date-picker
        v-model="date"
        type="date"
        :clearable="false"
        @change="changeDate"
        :picker-options="pickerOptions"
        placeholder="选择日期">
      </el-date-picker>
     </el-card>
      <div class="amap-demo" id="container"></div>
      <el-card :body-style="{ padding: '0px' }" class="el-card-controll" style="width:250px;text-align:center;">
      <div class="input-card">
    <h4>轨迹回放控制</h4>
    <div class="input-item">
        <el-button round id="start" size="small" @click="startAnimation">开始动画</el-button>
        <el-button round  id="pause" size="small" @click="pauseAnimation">暂停动画</el-button>
    </div>
    <div class="input-item">
        <el-button round  id="stop" size="small" @click="stopAnimation">停止动画</el-button>
        <el-button round  id="resume" size="small" @click="resumeAnimation">继续动画</el-button>
    </div>
      <div class="input-item">
        <el-select v-model="palySpeed"  placeholder="播放速度" >
      <el-option label="一倍速" value="1000"></el-option>
      <el-option label="二倍速" value="2000"></el-option>
      <el-option label="三倍速" value="3000"></el-option>
      <el-option label="四倍速" value="4000"></el-option>
    </el-select>
      </div>
      </div></el-card>
    </div>
    <div class="explain_wrapper">
        <div class="icon">
          <img src="../assets/icon/sharp_speeding_up.png" class="bottom_icon" alt="">
        </div>
        <div class="icon">
          <img src="../assets/icon/sharp_slowdown.png" class="bottom_icon" alt="">
        </div>
        <div class="icon">
          <img src="../assets/icon/sharp_brake.png" class="bottom_icon" alt="">
        </div>
        <div class="icon">
          <img src="../assets/icon/sharp_bend.png" class="bottom_icon" alt="">
        </div>
    </div>
    <div class="explain_wrapper">
        <div class="icon">
          <span>急加速：{{sUPoints.length}}</span>
        </div>
        <div class="icon">
          <span>急减车：{{sDPoints.length}}</span>
        </div>
        <div class="icon">
          <span>急刹车：{{sBPoints.length}}</span>
        </div>
        <div class="icon">
          <span>急转弯：{{sZPoints.length}}</span>
        </div>
    </div>
</div>
</template>
<script type="text/javascript">
import echarts from 'echarts'
import Vue from 'Vue'
import {formatDate} from '@/utils/date.js'
import { listByDate } from '@/apis/track.js'
import { selectByDate } from '@/apis/violation.js'
import VueAMap from 'vue-amap'
Vue.use(echarts)
let amapManager = new VueAMap.AMapManager()
export default {
  mounted () {
    this.getTracks()
  },
  data () {
    return {
      loading: false,
      palySpeed: '',
      date: new Date(),
      marker: undefined,
      amapManager1: amapManager,
      map: undefined,
      showPoint: true,
      // sUPoints: [[116.478998, 39.998555], [116.48367, 39.998968]], // 急加速点
      sUPoints: [],
      sUSrc: 'https://s2.ax1x.com/2019/01/28/kKLhfH.png',
      sDPoints: [], // 急减速点
      sDSrc: 'https://s2.ax1x.com/2019/01/28/kKLI1A.png',
      sBPoints: [], // 急刹车点
      sBSrc: 'https://s2.ax1x.com/2019/01/28/kKL5pd.png',
      // sZPoints: [[116.479282, 39.99856]], // 急转弯点
      sZPoints: [], // 急转弯点
      sZSrc: 'https://s2.ax1x.com/2019/01/28/kKLfte.png',
      markers: [], // 标记点集合
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() >= Date.now() - 8.64e6
        }
      },
      zoom: 17,
      center: {lng: 116.404, lat: 39.915},
      center1: [116.479282, 39.99856],
      amapManager,
      // 行驶轨迹经纬度数组
      lineArr: [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861], [116.48367, 39.998968]]
    }
  },
  methods: {
    formatDate,
    getTracks () {
      this.sUPoints = []
      this.sDPoints = []
      this.sBPoints = []
      this.sZPoints = []
      this.date = formatDate(this.date, 'yyyy/MM/dd')
      console.log(this.date)
      this.loading = true
      listByDate(this.date).then(e => {
        debugger
        this.lineArr = []
        e.data.map(data => {
          this.lineArr.push([data.longitude, data.latitude])
        })
        if (e.data.length > 0) {
          selectByDate(this.date).then(e => {
            e.data.map(element => {
              if (element.type === 2) {
                this.sUPoints.push([element.longitude, element.latitude])
              } else if (element.type === 3) {
                this.sDPoints.push([element.longitude, element.latitude])
              } else if (element.type === 4) {
                this.sBPoints.push([element.longitude, element.latitude])
              } else if (element.type === 5) {
                this.sZPoints.push([element.longitude, element.latitude])
              }
            })
            this.init()
          })
        } else {
          this.init()
        }
        this.loading = false
      })
    },
    // 初始化地图
    init () {
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 10
      })
      this.pushMarkers(this.sUPoints, this.sUSrc)
      this.pushMarkers(this.sDPoints, this.sDSrc)
      this.pushMarkers(this.sBPoints, this.sBSrc)
      this.pushMarkers(this.sZPoints, this.sZSrc)
      // 画出点
      if (this.showPoint) {
        this.markers.map(e => {
          this.map.add(e)
        })
      }
      if (this.lineArr.length >= 2) {
        this.marker = new AMap.Marker({
          map: this.map,
          position: this.lineArr[0], // 车的起始位置
          icon: 'https://webapi.amap.com/images/car.png',
          offset: new AMap.Pixel(-26, -13),
          autoRotation: true,
          angle: -90
        })
        // 绘制轨迹
        // eslint-disable-next-line
          var polyline = new AMap.Polyline({
          map: this.map,
          path: this.lineArr,
          showDir: true,
          strokeColor: '#28F', // 线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6 // 线宽
        // strokeStyle: "solid"  //线样式
        })
        var passedPolyline = new AMap.Polyline({
          map: this.map,
          strokeColor: '#AF5', // 线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6 // 线宽
        // strokeStyle: "solid"  //线样式
        })
        this.marker.on('moving', e => {
          passedPolyline.setPath(e.passedPath)
        })
      }
      // 画所有的违规点

      this.map.setFitView()
    },

    // 绘制地图
    drawMap (map) {
      // 把点坐标加入集合
      this.pushMarkers(this.sUPoints, this.sUSrc)
      this.pushMarkers(this.sDPoints, this.sDSrc)
      this.pushMarkers(this.sBPoints, this.sBSrc)
      this.pushMarkers(this.sZPoints, this.sZSrc)
      // 画出点
      if (this.showPoint) {
        this.markers.map(e => {
          map.add(e)
        })
      }
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.lineArr[0], // 车的起始位置
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90
      })
      // 绘制轨迹
      // eslint-disable-next-line
          var polyline = new AMap.Polyline({
        map: map,
        path: this.lineArr,
        showDir: true,
        strokeColor: '#28F', // 线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 // 线宽
        // strokeStyle: "solid"  //线样式
      })
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: '#AF5', // 线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 // 线宽
        // strokeStyle: "solid"  //线样式
      })
      this.marker.on('moving', e => {
        passedPolyline.setPath(e.passedPath)
      })
      // 画所有的违规点

      map.setFitView()
    },
    pushMarkers (points, iconSrc) {
      points.map(e => {
        var marker = new AMap.Marker({
          position: e,
          icon: iconSrc
          // offset: new AMap.Pixel(-26, -13)
          // angle: -90
        })
        this.markers.push(marker)
      })
    },
    changeDate () {
      console.log(this.date)
      this.map.destroy()
      amapManager = new VueAMap.AMapManager()
      this.sUPoints = []
      this.lineArr = []
      this.markers = []
      this.getTracks()
      this.$message('改变时间')
    },
    handleChange () {
      this.$message(this.showPoint ? '关闭四急' : '显示四急')
      if (this.showPoint) {
        this.markers.map(e => {
          this.map.add(e)
        })
      } else {
        this.markers.map(e => {
          this.map.remove(e)
        })
      }
    },
    startAnimation () {
      // 数字为速度
      this.marker.moveAlong(this.lineArr, this.palySpeed ? this.palySpeed : 1000)
    },
    pauseAnimation () {
      this.marker.pauseMove()
    },
    resumeAnimation () {
      this.marker.resumeMove()
    },
    stopAnimation () {
      this.marker.stopMove()
    }
  },
  name: 'drivingRecord'
}
</script>
<style type="text/css" scoped>
.top-card{
  position: absolute;
  right: 10px;
  z-index: 100;
  margin-top: 10px;
}
.amap-page-container{
  position: relative;
}
.amap-demo {
      height: 500px;
    }
.page-body{
  padding: 15px;
  text-align: center;
}
.page-body .page-header{
  background: #fff;
  padding: 15px;
  margin: -15px -15px 15px -15px;
}
.map {
  width: 100%;
  height: 500px;
}
.input-item{
  padding: 6px;
 
}
.input-item el-button {
  height: 20px;  
}
.el-card-controll{
  position: absolute;
  right: 0;
    margin-top: -210px;
    margin-right: 20px;
}
.bottom_icon{
  width: 50px;
  height: 50px;
}
.explain_wrapper{
  width: 50%;
  display: inline-block;
}
.explain_wrapper .icon{
  display: inline-block;
  width: 80px;
  padding-top: 10px;
}
</style>
